<template>
    <div>
        <div style="display:none">
            <div id='hour'></div>
            <div id='year'></div>
        </div>
        <div class="header">
            <cjc-nav title="常用表格" @customRouter="customRouter" :btn3="timer" class="daohang"></cjc-nav>
            <div class="stuMessage">
                <div class="userImg"><img :src="userInfo.avtor" width="95px" height="95px"></div>
                <div style="margin-top:5%">
                    <table class="userMsg">
                        <tr>
                            <td>姓名：<span> {{ userInfo.name }} </span></td>
                            <td>学校：<span> {{ userInfo.college }} </span></td>
                        </tr>
                        <tr>
                            <td>学号：<span> {{ userInfo.stuNum }} </span></td>
                            <td>专业：<span> {{ userInfo.major }} </span></td>
                        </tr>
                        <tr>
                            <td>性别：<span> {{ userInfo.sex }} </span></td>
                            <td>培养层次：<span> {{ userInfo.level }} </span></td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
        <div class="pageContent">
            <div class="notice" v-show="notice">
                <p>特别说明：</p>
                <p>本成绩单由西南财经大学天府学院教务处出具，未经许可，不得非法复制，篡改。学校保留采取法律手段的权利</p>
            </div>
            <div class="content">
                <!-- <button v-on:click='Toggle()'>Toggle</button> -->
                <div id="previewDiv" class="preview">
                    <img id="page1" src="static/images/credits.png" width="80%">
                </div>
            </div>
        </div>
        <div class="pageBottom">
            <div class="printNum"> 
                <div class="inbutton" @click="substrict"> <i class="icon iconfont icon-icon--1"></i> </div>
                <div class="incenter" v-text="count"></div>
                <div class="inbutton" @click="add"> <i class="icon iconfont icon-icon--"></i></div>
                <div class="inright">(份)</div>
            </div>
            <div class="printButton">
                <Button type="primary" style="width:100%; height:120px; font-size:30px;" @click="goPayment()">立即打印</Button>
            </div>
        </div>
        <!-- 打印支付页面 -->
        <!-- <Modal v-model="payPrint" width="500" class="ivu-modal" :mask-closable="false">
            <div class="payPrintHeader">
                <div class="payPrintHeaderTop">
                    您需要支付
                </div>
                <div class="payPrintHeaderContent">
                    <span style="font-size:30px;">￥</span><span style="font-size:100px;"> {{ this.totalPrice }} </span>
                </div>
                <div class="payPrintHeaderBottom">
                    <ul>
                        <li><div class="countNum">单价</div><div class="priceNum"> {{ this.unitPrice }}元 </div></li>
                        <li><div class="countNum">页数</div><div class="priceNum"> {{ this.pageNum }}页 </div></li>
                        <li><div class="countNum">份数</div><div class="priceNum"> {{ this.count }}份 </div></li>
                    </ul>
                </div>
            </div>
            <div class="payPrintContent">
                <div class="payPrintContentTop">
                    <span @click="goSaoMa"><img src="static/images/erweim.png" width="60px" height="60px"></span>
                </div>
                <div class="payPrintContentContent">
                    <img src="static/images/支付.jpg" width="150px" height="300px;">
                </div>
                <div class="payPrintContentBottom">请继续在TFinfo支付页面进行操作</div>
            </div>
            <div slot="close"></div>
            <div slot="footer">
                <Button size="large" @click="del" class="cancel">取消({{ this.seconds }}s)</Button>
            </div>
        </Modal> -->
        <!-- 支付打印二维码页面 -->
        <Modal v-model="saoMa" width="500" :mask-closable="false" :styles="{padding: '0 !important'}">
            <div class="payPrintHeader">
                <div class="payPrintHeaderTop">
                    您需要支付
                </div>
                <div class="payPrintHeaderContent">
                    <span style="font-size:30px;">￥</span><span style="font-size:100px;"> {{ this.totalPrice }} </span>
                </div>
                <div class="payPrintHeaderBottom">
                    <ul>
                        <li><div class="countNum">单价</div><div class="priceNum"> {{ this.unitPrice }}元 </div></li>
                        <li><div class="countNum">页数</div><div class="priceNum"> {{ this.pageNum }}页 </div></li>
                        <li><div class="countNum">份数</div><div class="priceNum"> {{ this.count }}份 </div></li>
                    </ul>
                </div>
            </div>
            <div class="payPrintContent">
                <div class="payPrintContentTop">
                    <!-- <span @click="goBack"><img src="static/images/返回.png" width="60px" height="60px"></span> -->
                </div>
                <div class="payPrintContentContent1">请使用支付宝或微信扫描下方二维码</div>
                <div class="payPrintContentBottom1">
                    <div class="payPrintContentAlipay"><div class='login-qrcode'>
                    <qrcode-vue :value='LoginQRvalue' :size='130'></qrcode-vue>
                    </div>支付宝</div>
                    <div class="payPrintContentWechat"><img src="static/images/微信.png" width="130px" height="130px">微信</div>
                </div>
            </div>
            <div><Button size="large" @click="del" class="cancel">取消({{ this.seconds }}s)</Button></div>
            <div slot="close"></div>
            <div slot="footer"></div>
        </Modal>
        <!-- 打印中页面 -->
        <Modal class-name="printingFile">
            <div slot="close"></div>
            <div class="printing">
                正在打印中，请勿中断操作...
            </div>
            <div slot="footer"></div>
        </Modal>
        <!-- 打印完成页面 -->
        <Modal v-model="printFinish" class-name="printingFile">
            <div slot="close"></div>
            <div style="text-align:center; height:70%; padding-top:200px;">
                <p><Icon type="ios-checkmark"></Icon></p>
                <p>打印完成，感谢使用！</p>
                <p>是否继续操作？</p>
            </div>
            <div slot="footer">
                <Button size="large" @click="del" style="border:none; width:100%; font-size:20px; color:#009aff">继续操作</Button>
            </div>
        </Modal>
        <!-- 墨水已空页面 -->
        <Modal  v-model="printing"  class-name="printingFile">
            <div slot="close"></div>
            <div class="printing">
                <p>墨水已空，请等待设备维修</p>
                <p style="color:#009aff">10s</p>
            </div>
            <div slot="footer"></div>
        </Modal>
        <!-- 纸槽已空页面 -->
        <Modal  v-model="printing"  class-name="printingFile">
            <div slot="close"></div>
            <div class="printing">
                <p>纸槽已空，请等待设备维修</p>
                <p style="color:#009aff">10s</p>
            </div>
            <div slot="footer"></div>
        </Modal>
        <!-- 设备故障页面 -->
        <Modal  v-model="printing"  class-name="printingFile">
            <div slot="close"></div>
            <div class="printing">
                <p>设备故障，请等待设备维修</p>
                <p style="color:#009aff">10s</p>
            </div>
            <div slot="footer"></div>
        </Modal>
    </div>
</template>

<script>
import QrcodeVue from 'qrcode.vue'
export default {
    name: 'table',
    created() {
        setTimeout(this.timeValid, 1000)
        this.getFileInfo()
    },
    data() {
        return {
            LoginQRvalue: '',
            userInfo: {
                name: '李四',
                sex: '女',
                college: '西南财经大学天府学院',
                stuNum: '41400812',
                major: '计算机科学与技术',
                level: '本科(四年)',
                avtor: 'static/images/tx.png'
            },
            fileInfo: [
                {fileName: '成绩单打印', fileContent: 'static/images/成绩单.png', fileNotice: 'asdssad'},
                {fileName: '成绩单打印', fileContent: 'static/images/成绩单.png', fileNotice: 'asdssad'},
                {fileName: '成绩单打印', fileContent: 'static/images/成绩单.png', fileNotice: 'asdssad'},
                {fileName: '成绩单打印', fileContent: 'static/images/成绩单.png', fileNotice: 'asdssad'}
            ],
            // payPrint: false,
            printing: false,
            notice: true,
            printFinish: false,
            saoMa: false,
            timer: 60,
            // timer1: null,
            unitPrice: 1,
            pageNum: 1,
            totalPrice: 1,
            count: 1,
            seconds: '',
            // seconds1: '',
        }
    },
    methods: {
        setFileInfoWatcher() {
            let printTime = setInterval(() => {
                if (window.printTemplateList !== undefined) {
                    window.clearInterval(printTime)
                    let imageUrl = window.printTemplateList.result.split(',')
                    document.getElementById('page1').src = imageUrl[0]
                }
            }, 600)
        },
        getFileInfo() {
            let apiData = {
                interface: 'printTemplate',
                // userId: window.websocketUserInfo.result.USER_ID,
                userId: 1,
                fileId: 1,
                clientId: this.cookie.get('clientId')
            }
            // 获取文件信息
            this.socket.sendMessage(apiData)
            this.setFileInfoWatcher()
        },
        doPrint() {
            var myDoc = {
                documents: document,
                settings: {
                    topMargin: 10,
                    leftMargin: 10,
                    bottomMargin: 10,
                    rightMargin: 10
                },
                copyrights: '杰创软件拥有版权  www.jatools.com' // 版权声明,必须
            }
            document.getElementById('jatoolsPrinter').print(myDoc, false)// 打印预览// 直接打印，不弹出打印机设置对话框
        },
        watcherPayStatus() {
            let alipayMoneyBack = setInterval(() => {
                if (window.alipayMoneyBack !== undefined) {
                    window.clearInterval(alipayMoneyBack)
                    console.log(window.alipayMoneyBack)
                    if (window.alipayMoneyBack.result !== undefined) {
                        this.doPrint()
                    }
                }
            }, 500)
        },
        setPayScanWatcher() {
            let playTime = setInterval(() => {
                if (window.AliPayCode !== undefined) {
                    window.clearInterval(playTime)
                    this.LoginQRvalue = window.AliPayCode.result.qr_code
                    this.watcherPayStatus()
                }
            }, 500)
        },
        customRouter() {
            this.$router.push({
                path: '/home'
            })
        },
        del() {
            // this.payPrint = false
            this.saoMa = false
        },
        substrict() {
            if (this.count > 1) {
                this.count--
            } else {
                this.count = 1
            }
            this.totalPrice = this.unitPrice * this.pageNum * this.count
        },
        add() {
            if (this.count < 10) {
                this.count++
            } else {
                this.count = 10
            }
            this.totalPrice = this.unitPrice * this.pageNum * this.count
        },
        // goSaoMa() {
        //     this.saoMa = true
        //     this.payPrint = false
        //     const TIME_COUNT1 = 60
        //     if (!this.timer1) {
        //         console.log('你好----------')
        //         this.seconds1 = TIME_COUNT1
        //         this.timer1 = setInterval(() => {
        //             if (this.seconds1 > 0 && this.seconds1 <= TIME_COUNT1) {
        //                 this.seconds1--
        //             } else {
        //                 this.saoMa = false
        //                 clearInterval(this.timer1)
        //                 this.timer1 = null
        //             }
        //             if (this.saoMa === false) {
        //                 this.seconds1 = 60
        //             }
        //         }, 1000)
        //     }
        // },
        // goBack() {
        //     this.payPrint = true
        //     this.saoMa = false
        // },
        Toggle() {
            this.notice = !this.notice
        },
        goPayment() {
            const TIME_COUNT = 60
            this.saoMa = true
            if (!this.timer) {
                this.seconds = TIME_COUNT
                this.timer = setInterval(() => {
                    if (this.seconds > 0 && this.seconds <= TIME_COUNT) {
                        this.seconds--
                    } else {
                        this.saoMa = false
                        console.log('NININININI', this.timer)
                        clearInterval(this.timer)
                        this.timer = null
                    }
                    if (this.saoMa === false) {
                        this.seconds = 60
                    }
                }, 1000)
            }
            let apiData = {
                interface: 'alipayMoney',
                printNum: 1,
                fileId: 1,
                clientId: this.cookie.get('clientId')
            }
            this.socket.sendMessage(apiData)
            this.setPayScanWatcher()
        },
        timeValid() {
            if (this.timer > 1) {
                this.timer--
            } else {
                this.timer = 0
            }
        }
    },
    computed: {
        chartList() {
            let tempObj = []
            this.chartSample.map((item) => {
                let a = {
                    fileName: item.fileName,
                    fileContent: item.fileContent,
                    printNotice: item.fileNotice,
                }
                tempObj.push(a)
            })
            return tempObj
        },
        // userInfo() {
        //     let a
        //     if (window.websocketUserInfo.map !== null && window.websocketUserInfo.map !== undefined) {
        //         window.websocketUserInfo.map((item) => {
        //             if (item.genderCode === 1) {
        //                 item.genderCode = '男'
        //             } else {
        //                 item.genderCode = '女'
        //             }
        //             a = {
        //                 name: item.name,
        //                 sex: item.genderCode,
        //                 college: item.regionCode,
        //                 stuNum: item.keyId,
        //                 major: '计算机科学与技术',
        //                 level: '本科(四年)',
        //                 avtor: item.icon
        //             }
        //         })
        //     } else {
        //         this.$router.push({
        //             path: '/home'
        //         })
        //         return null
        //     }
        //     return a
        // }
    },
    components: {
        QrcodeVue,
        cjcNav: () => import('@/components/common/Nav.vue')
    }
}
</script>

<style lang="less" scoped>
@import '../lib/css/iconfont.css';
.header {
    width: 100%;
    height: 200px;
    background: -ms-linear-gradient(left,#4fadff,#00f3f5);
    .stuMessage {
        float: left;
        background: white;
        width: 80%;
        height: 100%;
        margin: 10% 10% 0% 10%;
        border-radius: 30px;
        box-shadow: 2px 2px 5px #888888;
        .userImg {
            width:100px;
            height:100px;
            border-radius:50px;
            border:solid rgba(79,173,255,0.5) 5px;
            margin: -30px auto;
            background-color: white;
            img {
                margin-top: -2px;
                margin-left: -2px;
            }
        }
        .userMsg {
            width: 100%;
            text-align: left;
            margin-left: 20%;
            line-height: 25px;
            font-size: 15px;
            color: #666;
            tr {
                td {
                    span {
                        color: #111;
                    }
                }
            }
        }
        
    }
}
.daohang {
    background-color: rgba(255,255,255, 0);
    border: rgba(255,255,255, 0);
    color: white;
}
.ivu-icon {
    color: white;
}
.pageContent {
    width: 80%;
    height: 1250px;
    margin: 2% 10%;
    float: left;
    background-color: #ffffff;
    .notice {
        width: 100%;
        height: 200px;
        font-size: 20px;
        background-color: #f2f2f2;
    }
    .content {
        width: 100%;
        height: 1100px;
        // margin: 0% 10%;
        overflow: auto;
        background-color: #ffffff;
        text-align: center;
        .preview {
            width: 100%;
            height: 1120px;
            background-color: white;
            overflow: auto;
        }
    }
}
.pageBottom {
    width: 100%;
    float: left;
    position: absolute;
    bottom: 0;
    .printNum {
        height: 150px;
        text-align: center;
        .incenter {
            width: 35px;
            height: 35px;
            line-height: 35px;
            display: inline-block;
            text-align: center;
            margin-top: 60px;
            font-size: 25px;
            -webkit-user-select:none;
            -moz-user-select:none;
            -ms-user-select:none;
            user-select:none;
        }
        .inbutton {
            width: 35px;
            height: 35px;
            line-height: 35px;
            color: #009aff;
            display: inline-block;
            text-align: center;
            border-radius: 5px;
            font-size: 45px;
            -webkit-user-select:none;
            -moz-user-select:none;
            -ms-user-select:none;
            user-select:none;
            .iconfont {
                font-size: 38px;
            }
        }
        .inright {
            width: 40px;
            height: 25px;
            line-height: 25px;
            display: inline-block;
            text-align: center;
            color:#595959;
            font-size:20px;
        }
    }
}
.printButton {
    height: 120px;
}
.printingFile {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 7%;
    margin-bottom: 35%;
    .ivu-modal-content {
        height:400px;
        width: 600px;
        border-radius: 15px;
    }
}
.payPrintHeader {
    width: 100%;
    height: 300px;
    border-radius: 10px 10px 0px 0px;
    background: -ms-linear-gradient(left,#4fadff,#00f3f5);
    .payPrintHeaderTop {
        text-align:center;
        font-size:30px;
        color:white;
        padding-top:10px;
    }
    .payPrintHeaderContent {
        width: 100%;
        height: 190px;
        text-align: center;
        color: white;
        line-height: 220px;
    }
    .payPrintHeaderBottom {
        width: 100%;
        height: 60px;
        ul {
            height: 100%;
            width: 80%;
            margin-left: 70px;
            li {
                width: calc(~'98% / 3');
                height: 100%;
                display: inline-block;
                padding: 20px 15px 0px 15px;
                .countNum {
                    width: 48px;
                    height: 18px;
                    border-radius: 10px;
                    background-color: white;
                    text-align: center;
                    color: #25ccfe;
                    float: left;
                }
                .priceNum {
                    width: 30px;
                    height: 18px;
                    color: #fff;
                    text-align: center;
                    float: left;
                }
            }
        }
    }
}
.payPrintContent {
    height: 320px;
    .payPrintContentTop {
        height: 60px;
        width: 60px;
        float: right;
    }
    .payPrintContentContent {
        height: 320px;
        text-align: center;
        padding-top: 5%;
        padding-left: 10%;
    }
    .payPrintContentBottom {
        text-align: center;
        width: 100%;
        font-size: 15px;
        color: #818181;
    }
    .payPrintContentContent1 {
        text-align: center;
        width: 100%;
        height: 80px;
        line-height: 80px;
        font-size: 15px;
        color:#666666;
        // background-color: yellow;
        padding-left: 50px;
    }
    .payPrintContentBottom1 {
        width: 100%;
        height: 220px;
        text-align: center;
        padding: 15px;
        .payPrintContentAlipay {
            display: inline-block;
            width: 130px;
            height: 150px;
            margin: 20px;
            color: #818181;
        }
        .payPrintContentWechat {
            display: inline-block;
            width: 130px;
            height: 150px;
            margin: 20px;
            color: #818181;
        }
    }
}
.cancel {
    border: none;
    width: 100%;
    height: 60px;
    font-size: 30px;
    color:#009afd;
}
.printing {
    font-size: 30px;
    width: 100%;
    text-align: center;
    padding-top: 180px;
    color: #848484
}
.saomiao {
    color:#00f3f5;
}
.ivu-modal {
    .ivu-modal-wrap {
        .ivu-modal-body {
            padding: 0 !important;
        }
    }
}

</style>
